<template>
	<view>
		
		<!-- 头顶搜索框-使用自定义的搜索组件 -->
		<view class="search-box">
			<my-search @onSearch = "gotoSearch"></my-search>
		</view>
		
		<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000" :circular="true">
			<swiper-item v-for="(item , index) in swiperList" :key="index">
				<!-- navigator 标签 == a标签，进行页面跳转 -->
				<navigator class="swiper-item" :url="'/subpkg/goods_details/goods_details?id=' + item.id">
					<image :src="item.image"></image>
				</navigator>
			</swiper-item>
		</swiper>
		
		<!-- 分类导航区域 -->
		<view class="nav-list">
			<view class="nav-item" v-for="(item, i) in navList" :key="i" @click="handelClick(item)">
				<image :src="item.img" class="nav-item"></image>
			</view>
		</view>
		
		<!-- 楼层区域 -->
		<view class="floor-list">
			<!-- 楼层item项 -->
			<view class="floor-item" v-for="(item,i) in floorList" :key="i">
				<!-- 楼层标题/ -->
				<image :src="item.floor_title.floor_img" class="floor-title"></image>
				<!-- 楼层图片区域 -->
				<view class="floor-img-box">
					<!-- 左侧大图片的盒子 ,  mode="widthFix"表示盒子宽度自适应-->
					<navigator class="left-img" :url="item.product_list[0].url">
						<image :src="item.product_list[0].image_src" :style="{with:item.product_list[0].image_width + 'rpx'}" mode="widthFix"></image>
					</navigator>
					<!-- 右侧四个小盒子图片 -->
					<view class="right-img">
						<!-- v-if = "num !== 0" 表示下标索引值不为0时，显示图片 ，item.product_list[0]项图片不显示 -->
						<navigator class="right-img-item" v-for = "(item2, num) in item.product_list" :key="num" v-if = "num !== 0" :url="item2.url">
							<image :src="item2.image_src" :style="{with:item2.image_width + 'rpx'}" mode="widthFix"></image>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//这是装轮播图数据列表
				swiperList: [],
				//中间分类导航区域导航数据
				navList:[],
				//页面楼层数据
				floorList:[]
			};
		},
		
		onLoad(){
			//调用方法，获取轮播图数据(连接接口)
			this.getSwiperList(),
			//调用方法，获取中间分类导航区域导航数据
			this.getNavList(),
			this.getFloorList()
		},
		
		methods: {
			async getSwiperList(){
				const { data:res } = await uni.$http.get('/slides')
				//请求失败
				//未封装的写法
				// if(res.meta.status !== 200){
				// 	return uni.showToast({
				// 		title:'数据请求失败！',
				// 		duration:1500,
				// 		icon:'none'	
				// 	})
				// }
				// this.swiperList = res.message 
				
				//封装后的写法
				if(res.meta.status !== 200) return uni.$showMsg()
				this.navList = res.message //请求成功，得到数据
				// console.log("lll222222",res)
				uni.$showMsg('数据请求成功！')
			}		
		
		//中间导航接口请求
		async getNavList(){
				const { data:res } = await uni.$http.get('/catitems')
				if(res.meta.status !== 200) return uni.$showMsg()
				this.swiperList = res.message //请求成功，得到数据
				// console.log("lll222222",res)
				uni.$showMsg('数据请求成功！')
			}
		
		//楼层数据接口请求
		async getFloorList(){
				const { data:res } = await uni.$http.get('/floordata')
				if(res.meta.status !== 200) return uni.$showMsg()
				this.floorList = res.message //请求成功，得到数据
				
				//对数据进行处理，双重循环取得里面的跳转url
				res.message.forEach(floor =>{
					floor.product_list.forEach(prod =>{
						prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]
					})
				})
			}
				
				
		//点击中间导航图标跳转到相应页面
		handelClick(item) {
			if(item.name == '分类'){
				uni.switchTab({
					url:'/pages/cate/cate'
				})
			}
		},
		//自定义事件，子传父
		gotoSearch(){
			 uni.navigateTo({
				url:'/subpkg/search/search'
			 })
		}
	}
// methods: {
// 			// 登录
// 			async formSubmit(e) {
//                 //参数
// 				const params = {
// 					username: e.detail.value.username,
// 					password: e.detail.value.password,	
// 				};
//                 // 开启loading
// 				uni.showLoading({
// 					title:"登录中"
// 				})
//                //发送请求
// 				const {data: res} = await uni.$http.post('/login', params);
				
// 				if (res.code !== '0') {
// 					return uni.showToast({
// 						title: '用户名或密码错误',
// 						duration: 2000,
// 						icon: 'none'
// 					});
// 					return;
// 				} else {
// 					uni.showToast({
// 						title: '登录成功',
// 						duration: 2000,
// 						icon: 'none'
// 					});    
// 				}
// 			}
		}
</script>

<style lang="scss">
	swiper{
		height: 330rpx;
		.swiper-item,
		image{
			width: 100%;
			height: 100%;
		}
	}
	.nav-list{
		display: flex;
		justify-content: space-around;
		margin: 15px 0;
		.nav-item{
			width: 128px;
			height: 140px;
		}
	}
	.right-img-box{
		display: flex;
		flex-wrap: wrap;
	}
	.floor-img-box{
		display: flex;
		padding-left: 10rpx;
	}
	.search-box{
		//设置定位效果为“吸顶”
		position: sticky;
		//'吸顶'的位置
		top: 0;
		//提高层级，防止被轮播图覆盖
		z-index: 222;
	}
</style>
